<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="${basePath}/css/mui.min.css" rel="stylesheet" />
    <link href="${basePath}/css/style.css" rel="stylesheet" />
    <style>
        .area {
            margin: 20px auto 0px auto;
        }
        .mui-input-group:first-child {
            margin-top: 20px;
        }
        .mui-input-group label {
            width: 22%;
        }
        .mui-input-row label~input,
        .mui-input-row label~select,
        .mui-input-row label~textarea {
            width: 78%;
        }
        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }
        .mui-content-padded {
            margin-top: 25px;
        }
        .mui-btn {
            padding: 10px;
        }
        .mui-input-row{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 20px;
        }
        input[type=text],input[type=password]{
            width: 80%;
        }
        .code{
            width: 65% !important;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">注册</h1>
</header>
<div class="mui-content">
    <form class="mui-input-group">
        <div class="mui-input-row">
            <div class="mui-icon mui-icon-phone"></div>
            <input id='account' type="text" class=" mui-input-clear mui-input" value="13638642400" placeholder="手机号">
        </div>

        <div class="mui-input-row">
            <div class="mui-icon mui-icon-paperclip"></div>
            <input id='code' type="text" class="mui-input-clear mui-input code" placeholder="请输入验证码">
            <button type="button" class=" mui-btn-blue" id="cfbut">发送</button>
        </div>
        <div class="mui-input-row">
            <div class="mui-icon mui-icon-locked"></div>
            <input id='password' type="password" class="mui-input-clear mui-input" value="123456" placeholder="请输入密码">
        </div>
        <div class="mui-input-row">
            <div class="mui-icon mui-icon-locked"></div>
            <input id='password_confirm' type="password" class="mui-input-clear mui-input" value="123456" placeholder="请确认密码">
        </div>
    </form>
    <div class="mui-content-padded">
        <button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
    </div>
    <div class="mui-content-padded">
        <p>注册真实可用，注册成功后的用户可用于登录，但是示例程序并未和服务端交互，用户相关数据仅存储于本地。</p>
    </div>
</div>
<script src="${basePath}/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${basePath}/js/req.js" type="text/javascript" charset="utf-8"></script>
<script src="${basePath}/js/mui.min.js"></script>
<script src="${basePath}/js/app.js"></script>
<script>
    (function(mui, doc) {
        mui.init();
        let settings = app.getSettings();
        let regButton = doc.getElementById('reg');
        let accountBox = doc.getElementById('account');
        let passwordBox = doc.getElementById('password');
        let code = doc.getElementById('code');
        let passwordConfirmBox = doc.getElementById('password_confirm');
        regButton.addEventListener('tap', function(event) {
            var regInfo = {
                account: accountBox.value,
                password: passwordBox.value,
                code: code.value
            };
            if("" == regInfo.account || "" == regInfo.password){
                mui.toast('用户名或密码不能为空');
                return;
            }
            var passwordConfirm = passwordConfirmBox.value;
            if (passwordConfirm != regInfo.password) {
                mui.toast('密码两次输入不一致');
                return;
            }
            let data = {
                url:"注册接口",
                data:{
                    mobile:regInfo.account,
                    password:regInfo.password,
                    code:regInfo.code
                },
            }
//我自己封装的ajax，可以看看我的文章
            ajax(data,function(res){
                console.log(res);
                if(res.code == -1){
                    mui.toast(res.message);
                }
                if(res.code == 1){
                    mui.toast("注册成功");

                }
            });
        });
        let i = 0,flag = true;
        $("#cfbut").bind("click",function(){
            if(flag){
                let data = {
                    url:"短信接口",
                    data:{
                        mobile:accountBox.value
                    },
                }
                ajax(data,function(json){
                    console.log(json);

                });
                let time;
                flag = !flag;
                mui.toast('验证码已发送到您的手机，请稍等...');
                time = setInterval(function(){
                    i++;
                    $("#cfbut").html("重发"+ i);
                    if(i > 59){
                        i = 0;
                        clearInterval(time);
                        mui.toast("如果验证码未收到，请重发");
                        flag = !flag;
                        $("#cfbut").html("重发");
                    }
                },1000);
            }
        })
    }(mui, document));
</script>
</body>

</html>